
<script setup>
import { reactive, ref } from 'vue';

import baseModel from "@/components/baseModel/baseModel.vue";
import request from "@/common/utils/request";

const props = defineProps({

});

const dialog = ref(null)

// 客服二维码链接
const contact_url = ref('')

// 取消展示
const handleCancel = () => {
  emit('cancel', data.value)
  dialog.value && dialog.value.closeModal()

};

const getConfig = () => {
  request.get("/work_ai", "/config").then((res) => {
    console.log(res,'客服二维码数据??');
    if (res.list && res.list.service_qrcode) {
      contact_url.value = res.list.service_qrcode;
    }
  });
};

// 打开弹窗
const showModal = () => {
  dialog.value && dialog.value.showModal();
  getConfig()
};
// 关闭弹窗
const closeModal = () => {
  dialog.value && dialog.value.closeModal()
};

defineExpose({
  showModal,
  closeModal
});

</script>
<template>
  <div>
    <baseModel ref="dialog" :contentWidth="'400px'" :zIndex="10204" :maskClosable="true" :centered="false" :closable="false">
      <template #title>
        <span></span>
      </template>
      <template #content>
        <div class="content">
            <span class="title">联系在线客服</span>

            <div class="img_box">
                <img :src="contact_url" alt="">
            </div>

          <span class="bottom_tips">请使用微信扫描二维码</span>
        </div>
      </template>
      <template #footer>
        <span></span>
      </template>
    </baseModel>

  </div>

</template>

<style lang="less" scoped>
    .content{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 20px;

        .title{
            font-size: 18px;
            font-weight: 600;
            // margin-bottom: 20px;
        }

        .img_box{
            width: 100%;
            padding: 25px 40px;
            img{
                width: 100%;
                object-fit: cover;
                width: 100%;
            }
        }


        .bottom_tips{
            color: #666;
            font-size: 12px;
            // margin-top: 20px;
        }
    }
</style>